<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn1">按钮1</button>
<button class="remove">移除事件</button>

<script>
var  btn1 = document.querySelector('.btn1');
var  remove = document.querySelector('.remove');

// 事件模型：主要是规定如何添加事件，如何移除事件，以及事件的执行流（执行顺序）
// 三种事件模型：DOM 0级事件模型、DOM 2级事件模型、IE事件模型
// DOM 0级事件模型，是早期的事件模型，所有浏览器都支持
// DOM 2级事件模型，是新出的事件模型，低版本浏览器不支持（IE678）
// IE事件模型（IE678），IE低版本浏览器遵循的事件模型

// DOM 0级事件模型
// 添加事件：dom.on+type = 事件处理函数
// 移除事件：dom.on+type = null
// 给同一个元素添加多个相同类型的事件时，会发生覆盖，只执行最后一个事件处理函数
btn1.onclick = function (){// 事件处理函数
    console.log( 'btn1被点击。。。1' )
}
btn1.onclick = function (){// 事件处理函数
    console.log( 'btn1被点击。。。2' )
}
btn1.onclick = function (){// 事件处理函数
    console.log( 'btn1被点击。。。3' )
}

remove.onclick = function (){
    console.log( '移除事件。。。' );

    // 移除btn1的click事件
    btn1.onclick = null;
}

</script>
</body>
</html>